<template>
  <div style="margin-top: 20px;margin-bottom: 20px;width: 500px;">
    <!-- <el-button style="margin-top: 15px;" @click="query">图数据切换，动态更新</el-button> -->
    <el-autocomplete
      style="width: 500px"
      class="inline-input"
      v-model="input"
      :fetch-suggestions="querySearch"
      placeholder="请输入论文标题"
      :trigger-on-focus="false"
      @select="handleSelect"
      clearable
    >
      <el-button
        slot="append"
        type="success"
        icon="el-icon-search"
        @click="get_recommendation"
      >推荐</el-button>
    </el-autocomplete>
  </div>
</template>

<script>
export default {
  name: 'gSearch',
  // props: {
  //   isShowPrepend: {
  //     type: Boolean,
  //     default: true
  //   }
  // },
  data () {
    return {
      input: '',
      mode: '1',
      data: [],
      results: []
    }
  },
  mounted () {
    this.$emit('getData', this.data)
  },
  methods: {
    get_recommendation () {
      console.log(this.input)
      // console.log(typeof this.mode)

      var that = this
      this.axios.post('http://127.0.0.1:5000/get_recommendation', {
        name: this.input
      })
        .then(function (response) {
          console.log('数据请求成功！')
          that.$emit('getData', response.data)
        })
    },
    querySearch (queryString, cb) {
      var res = this.results
      var results = queryString ? res.filter(this.createFilter(queryString)) : res
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter (queryString) {
      return (res) => {
        return (res.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1)
      }
    },
    handleSelect (item) {
      console.log(item)
    }
  }
}
</script>

<style lang='scss' scoped>
.el-select {
  width: 120px;
  // background-color: #fff;
}
// .input-with-select .el-input-group__prepend {
//   // background-color: #6ecbf3;
// }
</style>
